<!--
 * @Author: 可以清心
 * @Description: 
 * @Date: 2023-05-19 17:02:19
 * @LastEditTime: 2023-06-12 16:00:00
-->
<template>
    <div class="item">
        <div class="header">
            <span class="title">{{ item.title }}<span class="header-count">({{ item.list && item.list.length ? item.list.length : 0 }})</span></span>
        </div>
        <div @mouseenter="onTopEnter" @mouseleave="onTopLeave" class="swiper-wrapper">
            <swiper class="swiper-warp" :options="swiperOption" v-if="item.list.length > 0" ref="swiper">
                <swiper-slide v-for="(info, index) in item.list" :key="index">
                    <div v-if="item.title !== '审批中车辆'" class="swiper-info"><span class="text">{{ info }}</span></div>
                    <div v-else class="swiper-info-approver swiper-info">
                        <span class="text">{{ info.carNumber }}</span>
                        <span class="text">{{ info.currentApprover }}</span>
                    </div>
                </swiper-slide>
            </swiper>
        </div>
        <!-- <ul>
            <li v-for="info in list"><span class="text">{{ info }}</span></li>
        </ul> -->
    </div>
</template>

<script>
    import { swiper, swiperSlide } from "vue-awesome-swiper";
    require("swiper/dist/css/swiper.css");
    export default {
        name: 'Card',
        props: {
            item: {
                type: Object,
                required: true
            },
            width: {
                type: Number,
                required: true
            },
            count: {
                type: Number,
                required: true
            }
        },
        components: {
            swiper,
            swiperSlide
        },
        computed: {
            // list(){
            //     // 2rem 20px 1个字20px
            //     const list = this.item.list;
            //     const {width, count} = this;
  
            //     let result = [];
            //     let show = [...list];

            //     if(list && list.length){
            //         list.forEach(item => {
            //             // 一行的字数
            //             let line = Math.ceil(width / 20);

            //             new Array(Math.ceil(item.length / line)).fill(0).forEach((fill, index) => {
            //                 result.push(item.substring(index * line, index * line + line));
            //             })
            //         })
            //     }

            //     if(list.length < count){
            //         new Array(count - list.length).fill(0).forEach(item => {
            //             show.push("");
            //         })
            //     }


            //     return show;
            // },
            swiperOption() {
                const {count, item} = this;

                console.log(item, item)

                return {
                    notNextTick: true,
                    direction: 'vertical',
                    speed: 3000,//滚动速度
                    autoplay: {
                        delay: 1,
                        disableOnInteraction: false,//用户操作swiper之后，是否禁止autoplay
                        waitForTransition: true,//等待过渡完毕。自动切换会在slide过渡完毕后才开始计时
                    },
                    simulateTouch: false,//设置鼠标拖动无效
                    freeMode: true,//free模式，slide会根据惯性滑动且不会贴合
                    mousewheel: {
                        sensitivity: 1,//滚动一次切换几个slide
                    },
                    loop: item.title === '审批中车辆' ? true : item.list.length > count,
                    observer: true,//修改swiper自己或子元素时，自动初始化swiper
                    observeParents: true,//修改swiper的父元素时，自动初始化swiper
                    spaceBetween: 0,//slide之间的距离（单位px）
                    autoHeight: true, // 高度自适应
                    slidesPerView: 'auto', //slide可见数量，30: 行高

                    // 自己加的配置
                    // watchOverflow: true,
                    // cssMode: true,
                    // loopedSlides: item.list.length + 2,
                    // observeSlideChildren: true
                    // 自己加的配置
                    // notNextTick: true,
                    // direction: 'vertical',
                    // speed: 3000,//滚动速度
                    // autoplay: {
                    //     delay: 1000,
                    //     disableOnInteraction: false,//用户操作swiper之后，是否禁止autoplay
                    //     waitForTransition: true,//等待过渡完毕。自动切换会在slide过渡完毕后才开始计时
                    // },
                    // simulateTouch: false,//设置鼠标拖动无效
                    // freeMode: true,//free模式，slide会根据惯性滑动且不会贴合
                    // mousewheel: {
                    //     // sensitivity: item.list.length,//滚动一次切换几个slide
                    //     sensitivity: 1
                    // },
                    // // loop: item.list.length > count,//循环
                    // // loop: 'auto',
                    // loop: item.title === '审批中车辆' ? true : item.list.length > count,
                    // observer: true,//修改swiper自己或子元素时，自动初始化swiper
                    // observeParents: true,//修改swiper的父元素时，自动初始化swiper
                    // spaceBetween: 0,//slide之间的距离（单位px）
                    // // slidesPerView: count, //slide可见数量，30: 行高
                    // autoHeight: true, // 高度自适应
                    // slidesPerView: 'auto',
                }
            },
            swiper(){
                return this.$refs.swiper.swiper
            }
        },
        methods: {
            onTopEnter(){
                this.swiper.autoplay.stop()
                this.swiper.setTranslate(this.swiper.getTranslate());//鼠标移入立刻停止滚动
            },
            onTopLeave(){
                this.swiper.autoplay.start()
            }
        }
    }
</script>

<style lang="less" scoped>
    @import "./index";
</style>